<div class="w-[500px] max-w-full flex flex-col justify-center items-center gap-4 mb-20">
    <img src="/assets/logo.svg" class="w-20 h-20">
    <div class="text-3xl drop-shadow-md text-bluegray-500 dark:text-white">
        {{ 'PAC.Onboarding.WelcomeTo' | translate: {Default: 'Welcome to'} }}
        <span class="italic">X</span>pert AI
        {{ 'PAC.Onboarding.Platform' | translate: {Default: 'Platform'} }}
    </div>
    <div class="text-lg text-center">
        {{ 'PAC.Onboarding.WelcomeInfo' | translate: {Default: 'Looks like everything is working. Now let\'s get to know you, connect to your data, and start finding you some answers!'} }}
    </div>

    <button type="button" class="flex justify-center items-center rounded-lg text-lg px-4 py-1.5 shadow-sm border border-gray-200 bg-gray-100 hover:bg-gray-200 hover:shadow-lg" (click)="navigateTenant()">
        {{ 'PAC.Onboarding.LetGetStarted' | translate: {Default: 'Let\'s get started'} }}
    </button>
</div>

<div class="absolute bottom-4 p-4 ">
    {{ 'PAC.Onboarding.FeelStuck' | translate: {Default: 'If you feel stuck'} }}
    , <a href="https://www.mtda.cloud/en/docs/getting-started/onboarding/" class="text-bluegray-500 italic">
        {{ 'PAC.Onboarding.OurGuide' | translate: {Default: 'our getting started guide'} }}
        </a> {{ 'PAC.Onboarding.ClickAway' | translate: {Default: 'is just a click away'} }}.
</div>

<button class="absolute right-8 top-8 inline-flex justify-center items-center rounded-lg px-[10px] py-[6px] text-gray-900 text-[13px] font-medium border border-gray-200 hover:bg-gray-100" type="button"
  [cdkMenuTriggerFor]="languageMenu">
  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" class="w-5 h-5 mr-1">
    <path stroke-linecap="round" stroke-linejoin="round" d="M12 21a9.004 9.004 0 008.716-6.747M12 21a9.004 9.004 0 01-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 017.843 4.582M12 3a8.997 8.997 0 00-7.843 4.582m15.686 0A11.953 11.953 0 0112 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0121 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0112 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 013 12c0-1.605.42-3.113 1.157-4.418"></path>
  </svg>
  {{ 'PAC.Languages.' + currentLanguage() | translate: {Default: currentLanguage() } }}
</button>


<ng-template #languageMenu>
  <div cdkMenu class="cdk-menu__medium">
    @for (language of Languages; track language) {
      <div cdkMenuItem [class.active]="language === currentLanguage()"
        (click)="selectLang(language)">{{ 'PAC.Languages.' + language | translate: {Default: language } }}</div>
    }
  </div>
</ng-template>